<template>
	<view>
		<view class="column-div card-view">
			<view class="row-start headline">
				<image style="width: 40upx;height: 40upx;margin-right: 20upx;" src="/static/assets/shouzhang2.png " />
				<view>收账码</view>
			</view>
			<view style="font-size: 22upx;color: #999999;margin-bottom: 20upx;">将收账码出示给对方，即可通过扫码收账。</view>
			<!-- <view class="qr-code"></view> -->
			<tkiQrcode :unit="'200upx'" :val="qrUrl" onval loadMake style="margin-bottom: 50upx;"></tkiQrcode>
			<navigator url="/pagesAccount/receiptList/receiptList"  class="row-between record" hover-class="none">
				<view class="row-div" @click="navigatorClick">
					<image style="width: 36upx;height: 37upx;margin-right: 23upx;" src="/static/assets/jilu.png " />
					<view>收账记录</view>
				</view>
				<uni-icons type="arrowright" color="#666666" style="font-size: 30upx;"></uni-icons>
			</navigator>
		</view>
		<view class="row-between scan-qr-code" @click="scan">
			<view class="row-div">
				<image style="width: 40upx;height: 36upx;margin-right: 20upx;" src="/static/assets/saoma.png " />
				<view>扫码付账</view>
			</view>
			<uni-icons type="arrowright" color="#666666" style="font-size: 30upx;"></uni-icons>
		</view>
		
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {tkiQrcode},
		data() {
			return {
				qrUrl: '/pagesAccount/transfer'
				/* 
				file:///D:/04-Web-Project/new_ggShopping2/static/assets/shouzhang2.png 
				 file:///D:/04-Web-Project/new_ggShopping2/static/assets/saoma.png
				 file:///D:/04-Web-Project/new_ggShopping2/static/assets/jilu.png
				 */
			}
		},
		created() {
			this.getUserStatisticsCountApi()
		},
		methods: {
			navigatorClick () {
				console.log('/pagesAccount/receiptList/receiptList')
				uni.navigateTo({
					url: '/pagesAccount/receiptList/receiptList'
				})
			},
			getUserStatisticsCountApi() {
				this.$api.showLoading();
				this.$api.globalUtil.getUserInfo(this, (res) => {
					uni.hideLoading()
					this.qrUrl += '?account=' + res.data.response.telephone
					console.log(res)
				});
			},
			scan() {
				var _this = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log("scanCode", res)
						//  {"result":"www.baidu.com","scanType":"QR_CODE","charSet":"utf8","path":"","errMsg":"scanCode:ok"}  at pagesAccount/acceptPay.vue:59
						if (res.scanType == 'QR_CODE' && res.errMsg == 'scanCode:ok') {
							uni.navigateTo({
								url: res.result
							})
						}
					},
					fail: function(err) {
						console.log('扫码失败', err)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #FE5E49;
	}

	.card-view {
		width: 690upx;
		margin: auto;
		margin-bottom: 30upx;
		background: #FFFFFF;
		border-radius: 10upx;
		padding: 30upx 40upx;
		margin-top: 50upx;

		.headline {
			width: 100%;
			padding-bottom: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000033;
			border-bottom: 1px solid #EEEEEE;
			margin-bottom: 68upx;
		}

		.qr-code {
			width: 400upx;
			height: 400upx;
			margin-bottom: 50upx;
			background: #FFFFFF;
		}

		.record {
			width: 100%;
			padding-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000033;
			border-top: 1px solid #EEEEEE;
		}
	}

	.scan-qr-code {
		width: 690upx;
		margin: auto;
		background: #FFFFFF;
		border-radius: 10upx;
		padding: 30upx 40upx;
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000033;
	}
</style>
